<template>
	<view class="content">
		<view class="message" v-for="item,index in messageList" :key="index">
			<view class="left">
				<view v-show="curRemove===index" @click="removeCommonMessage(index)">
					<image src="/static/img/message/Group472@2x.png" alt="" v-show="curRemove===index" mode="scaleToFill"></image>
				</view>
				
				<span>{{item}}</span>
			</view>
			<view class="right">
				<image src="/static/img/message/Group290@2x.png" alt="" @click="changeCommonMessage(index)" mode=""></image>
				<image src="/static/img/message/Group289@2x.png" alt="" @click="remove(index)" mode=""></image>
			</view>
		</view>
		<view class="message" style="justify-content: center;" @click="addCommonMessage">
			<image src="/static/img/message/Subtract@2x.png" mode="scaleToFill"></image>
			<span>添加常用语</span>
		</view>
		<button>保存</button>
		
		<view class="">
			<u-popup mode="center" :show="show" round="12" :closeable="true"
			@close="close">
				<view class="popup">
					<span>添加常用语</span>
					<textarea v-model="newCommonMessage" :show-confirm-bar="false"
					placeholder="请输入常用语,不超过200字" maxlength="200"
					placeholder-style="font-size:24rpx" :show-count="false"></textarea>
					<span>{{newCommonMessage.length}}/200</span>
					<button @click="buttonClick">{{type=='add'?'添加':'保存'}}</button>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageList:['你好','谢谢你'],
				curRemove:NaN,					//显示删除按钮的索引
				curPopup:NaN,					//弹出层编辑对应message的索引
				show:false,						//弹出层是否显示?
				
				newCommonMessage:'',			//编辑常用语
				
				type:'add',						//操作类型：添加or修改
			}
		},
		methods: {
			remove(index){
				//删除图标显示or隐藏
				if(index===this.curRemove){
					this.curRemove=NaN;
				}else{
					this.curRemove=index
				}
			},
			removeCommonMessage(index){
				this.messageList.splice(index,1);
				this.curRemove=NaN;
			},
			changeCommonMessage(index){
				// 修改常用语
				this.curPopup=index;
				this.type='change';
				this.show=true;
				this.newCommonMessage=this.messageList[index]
			},
			addCommonMessage(){
				//添加常用语
				this.type='add';
				this.show=true
			},
			buttonClick(){
				if(this.newCommonMessage.length>0){
					if(this.type=='add'){
						
						this.messageList.push(this.newCommonMessage);
					}else{
						this.messageList[this.curPopup]=this.newCommonMessage;
					}
				}
				this.newCommonMessage='';
				this.show=false;
			},
			close(){
				this.show=false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		min-height: 100vh;
		padding: 1px 0;
		background-color:#F3F7F8;
		
		image{
			width: 32rpx;
			height: 32rpx;
		}
		.message{
			width: 686rpx;
			padding: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #FFFFFF;
			border-bottom: 1px solid #F3F7F8;
			
			>image{
				margin-right: 10rpx;
			}
			.left{
				display: flex;
				align-items: center;
				
				>view{
					display: flex;
					align-content: center;
					margin-right: 20rpx;
				}
			}
			.right{
				image:nth-child(1){
					margin-right: 20rpx;
				}
				
			}
		}
		
		>button{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 686rpx;
			height: 96rpx;
			margin: 32rpx;
			background: #08C8BD;
			border-radius: 8px 8px 8px 8px;
			font-size: 16px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		
		.popup{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 622rpx;
			padding: 32rpx;
			background-color: #FFFFFF;
			border-radius: 24rpx;
			
			>span:nth-of-type(1){
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #001A18;
				margin-bottom: 32rpx;
			}
			>textarea{
				width: 590rpx;
				height: 216rpx;
				padding: 32rpx;
				background: #F3F7F8;
				border-radius: 16px;
			}
			>span:nth-of-type(2){
				margin-top: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #99A3A3;
				align-self: flex-start;
			}
			>button{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 622rpx;
				height: 96rpx;
				margin-top: 32rpx;
				background: #08C8BD;
				border-radius: 8px 8px 8px 8px;
				font-size: 16px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>
